---
import { routes } from "~/collections/app";
import { FaGithub } from "react-icons/fa6";
import SidebarButton from "./sidebar-button";
import Search from "astro-pagefind/components/Search";

const pathname = Astro.url.pathname;
---

<header
  class="flex justify-between items-center py-2 md:p-4 top-0 fixed w-full z-10 backdrop-blur-md"
>
  <div class="flex items-center justify-between w-full">
    <div class="flex items-center gap-2">
      {
        pathname.startsWith("/docs") ? (
          <div class="h-10 w-10 md:hidden" />
        ) : (
          <SidebarButton client:only />
        )
      }
      <h2 class="text-xl md:text-3xl">
        <a href="/" class="flex gap-2 items-center">
          <img src="/images/spotube-logo.png" width="40px" alt="Spotube Logo" />
          Spotube
        </a>
      </h2>
    </div>

    <Search
      id="search"
      className="pagefind-ui"
      uiOptions={{
        showImages: false,
        showSubResults: true,
      }}
    />

    <a
      class="mw-2 me-4"
      href="https://github.com/KRTirtho/spotube?referrer=spotube.krtirtho.dev"
      target="_blank"
    >
      <button class="btn preset-filled flex items-center gap-2">
        <FaGithub />
        Star us
      </button>
    </a>
  </div>

  <nav class="hidden md:flex gap-3 items-center pr-2">
    {
      Object.entries(routes).map((route) => {
        const Icon = route[1][1];
        const isActive =
          route[0] === "/" ? pathname === "/" : pathname.startsWith(route[0]);

        return (
          <a href={route[0]}>
            <button
              type="button"
              class={`btn flex gap-2 ${route[0] === "/downloads" ? "preset-filled-primary-300-700" : "preset-filled-secondary-100-900"} ${isActive ? "underline" : ""}`}
            >
              {Icon && <Icon />}
              {route[1][0]}
            </button>
          </a>
        );
      })
    }
  </nav>
</header>
